<template>
    <div :id="id" class="chart_content"></div>
</template>

<script>
export default {
    name:'pie',
    props:["id","data"],
    methods:{
        getChart(){
            const { id, data } = this;
            let chart = this.$echarts.init(document.getElementById(id));
            let option = {
                color:data.color,
                series: [
                    {
                        type: 'pie',
                        radius: ['70%', '90%'],
                        avoidLabelOverlap: false,
                        label:{
                            show:false,
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.data
                    }
                ]
            };
            chart.setOption(option,true);
            window.addEventListener("resize",function(){
                chart.resize();
            });
        }
    },
    mounted(){
        this.getChart();
    }
}
</script>

<style lang="scss" scoped>
.chart_content{
    width:100%;
    height:100%;
}
</style>